<template>
  <div class="box">
    <div class="left">
      <div
        class="item"
        v-for="item in setpet"
        @contextmenu.prevent="getUl($event, item)"
        @click="changeTableList(item.id)"
      >
        <div>
          <div class="itemTitle">{{ item.text }}</div>
          <div class="itemNum">{{ item.num }}%</div>
        </div>
        <div>
          <span></span>
          <i class="el-icon-circle-plus" @click="addSetpet(item)"></i>
          <span></span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="item" v-for="item in tableList" @click="addFile(item)">
        <div>{{ item.fileName }}</div>
        <div>{{ item.time }}</div>
        <span v-if="item.url == ''">待上传</span>
      </div>
      <div class="item item1" @click="dialogVisible2 = true">+添加文件目录</div>
    </div>
    <div class="right">
      <div>
        <!-- <pdf :src="pdfSic"></pdf> -->
      </div>
    </div>
    <div class="classMouse" v-if="ulShow" :style="{ top: top, left: left }">
      <ul>
        <li @click="editSetpet">编辑</li>
        <li @click="removeSetpet">删除</li>
      </ul>
    </div>

    <el-dialog :visible.sync="dialogVisible1" width="30%" class="dialogForm">
      <template slot="title">
        <div style="text-align: center; font-size: 20px; font-weight: bold">
          创建节点
        </div></template
      >
      <el-form label-position="top" label-width="80px" :model="setpetForm">
        <el-form-item label="里程碑节点名称">
          <el-input v-model="setpetForm.text"></el-input>
        </el-form-item>
        <el-form-item label="节点排序">
          <el-input v-model="setpetForm.index"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="setpetForm.startTime"></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input v-model="setpetForm.endTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitSetpet">提交</el-button>
      </span>
    </el-dialog>
    <!-- 添加文件目录 -->

    <el-dialog :visible.sync="dialogVisible2" width="30%" class="dialogForm">
      <template slot="title">
        <div style="text-align: center; font-size: 20px; font-weight: bold">
          创建节点
        </div></template
      >
      <el-form label-position="top" label-width="80px" :model="fileForm">
        <el-form-item label="文件名称">
          <el-input v-model="fileForm.fileName"></el-input>
        </el-form-item>
        <el-form-item label="截至日期">
          <el-input v-model="fileForm.time"></el-input>
        </el-form-item>
        <el-form-item label="操作人员">
          <el-input v-model="fileForm.user"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitfile">提交</el-button>
      </span>
    </el-dialog>
    <!-- 添加文件目录 -->
    <!-- 上传文件 -->

    <el-dialog :visible.sync="dialogVisible3" width="30%" class="dialogForm">
      <template slot="title">
        <div style="text-align: center; font-size: 20px; font-weight: bold">
          文件上传
        </div></template
      >
      <el-upload
        class="upload-demo"
        action=""
        :auto-upload="false"
        :limit="1"
        :on-change="fileChange"
        :file-list="fileListUpload"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
    <!-- 上传文件 -->
  </div>
</template>
<script>
// import pdf from "vue-pdf";
export default {
  components: {
    // pdf,
  },
  data() {
    return {
      setpet: [
        {
          text: "立项批复",
          num: 0,
          index: 0,
          id: 0,
        },
        {
          text: "初步设计及概算批复",
          num: 0,
          index: 1,
          id: 1,
        },
        {
          text: "专项咨询完成情况",
          num: 0,
          index: 2,
          id: 2,
        },
        {
          text: "基本建设手续",
          num: 0,
          index: 3,
          id: 3,
        },
        {
          text: "招标计划备案",
          num: 0,
          index: 4,
          id: 4,
        },
        {
          text: "全过程咨询单位招标",
          num: 0,
          index: 5,
          id: 5,
        },
        {
          text: "第三方检测单位招标",
          num: 0,
          index: 6,
          id: 6,
        },
        {
          text: "施工总承包招标",
          num: 0,
          index: 7,
          id: 7,
        },
      ],
      dialogVisible1: false,
      addSetpetOld: {},
      setpetForm: {
        index: null,
      },
      clickOld: {},
      top: 0,
      left: 0,
      ulShow: false,
      fileList: [
        {
          fileName: "项目建议书或相关政策文件000",
          time: "2024年6月24日前",
          url: "",
          parentId: 0,
          id: 1,
        },
        {
          fileName: "项目建议书或相关政策文件111",
          time: "2024年6月24日前",
          url: "",
          parentId: 1,
          id: 2,
        },
        {
          fileName: "项目建议书或相关政策文件222",
          time: "2024年6月25日前",
          url: "",
          parentId: 2,
          id: 3,
        },
      ],
      tableList: [],
      fileForm: {},
      dialogVisible2: false,
      fileListUpload: [],
      // pdfSic: "/pdf演示文件.pdf",
      pdfSic: "",
      dialogVisible3: false,
      oldFile: {},
    };
  },
  watch: {
    dialogVisible1: function (n) {
      if (!n) {
        this.setpetForm = {
          index: null,
        };
      }
    },
    dialogVisible2: function (n) {
      if (!n) {
        this.fileForm = {};
      }
    },
    ulShow: function (n) {
      if (n) {
        document.addEventListener("click", this.removeUl);
      } else {
        document.removeEventListener("click", this.removeUl);
      }
    },
  },

  methods: {
    addSetpet(item) {
      this.addSetpetOld = item;
      this.setpetForm.index = item.index + 1;
      this.dialogVisible1 = true;
    },
    submitSetpet() {
      console.log(this.setpetForm);
      let obj = JSON.parse(JSON.stringify(this.setpetForm));
      if (obj.id) {
        for (let i = 0; i < this.setpet.length; i++) {
          if (this.setpet[i].id == obj.id) {
            this.setpet.splice(i + 1, 1, obj);
          }
        }
      } else {
        obj["id"] = this.getRandomThreeDigitNumber();

        if (this.setpet[this.setpet.length - 1].index <= obj.index) {
          this.setpet.push(obj);
        } else {
          for (let i = 0; i < this.setpet.length; i++) {
            if (this.setpet[i].index == obj.index - 1) {
              this.setpet.splice(i + 1, 0, obj);
              break;
            }
          }
        }
      }

      this.setIndex();
      this.dialogVisible1 = false;
    },
    //步骤重新排序
    setIndex() {
      this.setpet.forEach((ele, index) => {
        ele.index = index;
      });
    },
    getUl(e, item) {
      console.log(e);
      this.top = e.pageY + 10 + "px";
      this.left = e.pageX + 40 + "px";
      this.clickOld = item;
      this.ulShow = true;
    },
    removeUl() {
      this.ulShow = false;
    },
    editSetpet() {
      this.setpetForm = this.clickOld;
      this.dialogVisible1 = true;
    },
    //随机数
    getRandomThreeDigitNumber() {
      // 生成一个0到899之间的随机数
      var randomNum = Math.floor(Math.random() * 900);
      // 加上100，使其成为一个3位数
      return randomNum + 100;
    },
    removeSetpet() {
      for (let i = 0; i < this.setpet.length; i++) {
        console.log();
        if (this.setpet[i].id == this.clickOld.id) {
          this.setpet.splice(i, 1);
        }
      }
      this.setIndex();
    },
    changeTableList(id) {
      let arr = [];
      this.fileList.forEach((ele) => {
        if (ele.parentId == id) {
          arr.push(ele);
        }
      });
      this.tableList = arr;
    },
    submitfile() {
      this.fileForm["parentId"] =
        this.tableList.length != 0 ? this.tableList[0].parentId : 0;
      this.fileForm["url"] = "";
      this.fileForm["id"] = this.getRandomThreeDigitNumber();

      let obj = JSON.parse(JSON.stringify(this.fileForm));
      this.fileList.push(obj);
      this.changeTableList(obj.parentId);
      this.dialogVisible2 = false;
    },
    fileChange(File, fileList) {
      console.log(File, fileList);
      // this.fileList.forEach((ele, index) => {
      //   if (ele.id == this.oldFile.id) {
      //     this.oldFile.url = "1";
      //     this.fileList.splice(index + 1, 1, this.oldFile);
      //   }
      // });

      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].id == this.oldFile.id) {
          this.oldFile.url = "1";
          this.fileList.splice(i, 1, this.oldFile);
          break;
        }
      }

      console.log(this.oldFile.parentId, this.oldFile);
      this.changeTableList(this.oldFile.parentId);
      this.pdfSic = "/pdf演示文件.pdf";
      this.dialogVisible3 = false;
    },
    addFile(item) {
      this.oldFile = item;
      this.dialogVisible3 = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: calc(100% - 30px);
  width: 100%;
  display: flex;
  .left {
    flex: 1;
    background-color: white;
    min-width: 300px;
    overflow: auto;
    > .item {
      > div:nth-of-type(1) {
        height: 150px;
        background-color: rgba(242, 242, 242, 1);
        font-size: 20px;
        .itemTitle {
          text-align: center;
          line-height: 60px;
        }
        .itemNum {
          text-align: center;
          font-weight: bold;
          font-size: 25px;
        }
      }
      > div:nth-of-type(2) {
        height: 150px;
        position: relative;
        display: flex;
        > i {
          color: blue;
          position: absolute;
          background-color: white;
          left: 50%;
          height: 50px;
          width: 50px;
          font-size: 50px;
          margin-top: -25px;
          margin-left: -25px;
          top: 50%;
        }
        span {
          flex: 1;
        }
        span:nth-of-type(1) {
          border-right: 1px blue dashed;
        }
      }
    }
  }
  .content {
    flex: 2;
    background-color: white;
    min-width: 400px;
    margin: 0 15px;
    padding: 10px;
    border-radius: 15px;
    > .item {
      height: 80px;
      border-radius: 15px;
      margin-bottom: 15px;
      background-color: rgba(248, 246, 255, 1);
      position: relative;
      padding: 15px;
      box-sizing: border-box;
      span {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #6652ff;
      }
    }
    > .item1 {
      height: 80px;
      border-radius: 8px;
      margin-bottom: 15px;
      text-align: center;
      line-height: 80px;
      padding: 0;
      background-color: rgba(102, 82, 255, 0.1411764705882353);
      color: #6652ff;
    }
  }
  .right {
    flex: 3;
    background-color: white;
    min-width: 600px;
    border-radius: 15px;
  }
}
.dialogForm {
  ::v-deep .el-dialog__body {
    padding-top: 0;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  ::v-deep .el-form-item .el-form-item__label {
    padding-bottom: 0;
    color: black;
  }
}
.classMouse {
  position: fixed;
  background-color: white;
  ul {
    list-style: none;
    width: 80px;

    li {
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
    li:hover {
      background-color: #eee;
    }
  }
}
</style>
